Day - 22 JavaScript基本程式 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 22

Modern Web

從骨架到靈魂：網頁構成三部曲系列第 22 篇

Day - 22 JavaScript基本程式

17th鐵人賽

zse2233112

2025-10-05 11:45:14

60 瀏覽

分享至

昨天說了JavaScript基本說明今天則是來講解基本的JavaScript程式來讓大家更好理解JavaScript，在 HTML 文件中，我們通常會使用 <script> 與 </script> 標籤來嵌入或載入 JavaScript 程式碼。只要將編寫好的文件儲存為.htm 或 .html 格式，瀏覽器在讀取到 <script> 標記時，便會開始執行其中的 JavaScript 程式碼，並依程式內容影響網頁的結構、外觀或行為。

JavaScript的基本語法架構如下：

HTML

<script type="text/javascript">
    // JavaScript 程式碼放置於此
</script>

前面有提過，在 HTML5 的標準中，<script> 標記的預設 type 屬性值就是 text/javascript，因此可以也省略 type 屬性，直接使用 <script></script> 來撰寫 JavaScript 程式。

以下來看一個簡單的範例，這個範例將會使用JavaScript語法來直接在網頁上顯示出Hello, JavaScript!這一行文字

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        document.write("Hello, JavaScript! ");
    </script>
</body>
</html>

程式碼說明

1.<script> 標籤：
這是 HTML 中用來放置或引入 JavaScript 程式碼的地方。瀏覽器在讀到這個標籤時，就會開始執行裡面的程式碼。
2.document.write("Hello, JavaScript! ");
這是一行 JavaScript 指令，document：在 JavaScript 中，document 代表了整個 HTML 文件（也就是你的網頁）。
write()：這是一個寫入的功能 (稱為方法)，它會將括號 () 裡面的文字內容，直接寫在 <script> 標籤所在的位置上。